<template>
  <breadcremb
    :dataSrouce="[
      { key: '/home', title: '首页' },
      { key: '/user', title: '用户信息' }
    ]"
  />
  <div>
    <div class="search-container">
      <el-form ref="formRef" :model="form" inline label-width="60px" class="custom-el-form">
        <el-form-item label="用户名" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入用户名"
            style="width: 160px"
            clearable
          />
        </el-form-item>
        <el-form-item label="性别" aria-placeholder="请选择性别" prop="gender">
          <el-select v-model="form.gender" style="width: 160px" clearable>
            <el-option
              v-for="item in GENDER_OPTIONS"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button :icon="Plus" type="primary" @click="handleAdd">新增</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="id" label="账号" />
      <el-table-column prop="userName" label="姓名" />
      <el-table-column prop="idNum" label="身份证号码" />
      <el-table-column prop="gender" label="性别">
        <template #default="scope">
          <span v-if="scope.row.gender === 1">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" />
      <el-table-column label="操作" width="110">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
            >修改</el-button
          >
          <el-popconfirm title="是否确认删除？" @confirm="handleDel(scope.row)">
            <template #reference>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="dataTotal"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
      />
    </div>
    <edit-modal
      :visible="editVisible"
      :data-info="checkData"
      @ok="editModalOk"
      @cancel="closeEditVisible"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElTable,
  ElTableColumn,
  ElPopconfirm,
  ElButton,
  ElPagination,
  ElMessage
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import Breadcremb from '@/components/breadcrumb/index.vue'
import http from '@/utils/request'
import { GENDER_OPTIONS } from '@/utils/common'
import EditModal from './edit-modal.vue'

interface FormValue {
  name: string
  gender: string
}
const formRef = ref<FormInstance>()
const form = reactive<FormValue>({
  name: '',
  gender: ''
})

const editVisible = ref(false)

const closeEditVisible = () => {
  editVisible.value = false
}

const editModalOk = async (data: any) => {
  const res = await http.post('/manager/edit', data)
  const { code, desc } = res || {};
  if (code === '200') {
    ElMessage({
      message: '操作成功',
      type: 'success'
    })
    editVisible.value = false
    initData()
  } else {
    ElMessage({
      message: desc || '操作失败',
      type: 'error'
    })
  }
}

const tableData = ref([])
const dataTotal = ref(0)
const checkData = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = (val: number) => {
  pageSize.value = val
  initData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  initData()
}

onBeforeMount(() => {
  initData()
})

const handleSearch = () => {
  initData()
}

const handleReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  initData()
}

const initData = async () => {
  const params = {
    gender: form.gender,
    name: form.name,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    userType: 0
  }
  const res = await http.get('/manager/queryByPage', params)
  if (res.code === '200') {
    tableData.value = res.result || []
    dataTotal.value = res.total || 0
  }
}

const handleAdd = () => {
  checkData.value = null
  editVisible.value = true
}

const handleEdit = (data: any) => {
  checkData.value = data
  editVisible.value = true
}

const handleDel = async (data: any) => {
  const res = await http.get('/manager/deleteById', { id: data.id })
  const { code, desc } = res || {};
  if (code === '200') {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    initData()
  } else {
    ElMessage({
      message: desc || '删除失败',
      type: 'error'
    })
  }
}
</script>

<style scoped lang="scss">
.search-container {
  display: flex;
  justify-content: space-between;
}

.table-pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
